<template>
  <div style="display:flex; align-items:center; gap:8px;">
    <button class="btn" :disabled="page<=1" @click="to(page-1)">上一页</button>
    <span>第 {{ page }} / {{ totalPages }} 页，共 {{ total }} 条</span>
    <button class="btn" :disabled="page>=totalPages" @click="to(page+1)">下一页</button>
  </div>
  
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'Pagination',
  props: {
    total: { type: Number, required: true },
    page: { type: Number, required: true },
    size: { type: Number, default: 10 },
  },
  emits: ['change'],
  setup(props, { emit }) {
    const totalPages = computed(() => Math.max(1, Math.ceil((props.total || 0) / (props.size || 10))))
    const to = (p) => {
      const tp = totalPages.value
      if (p < 1 || p > tp) return
      emit('change', p)
    }
    return { totalPages, to }
  }
}
</script>

